<template>
  <div class="drag-ball">
    <div
      :ref="name"
      class="drag-ball_btn"
      @touchstart="touchstart"
      @touchmove="touchmove"
      @touchend="touchend"
      @click="clickBtn">
      <slot>
        <svg-icon :icon-class="iconClass" style="width: 30px;height: 30px;margin-top:5px;"></svg-icon>
      </slot>
    </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'

const defaultX = 10
const defaultY = 62

export default {
  props: {
    iconClass: String,
    name: {
      type: String,
      required: true
    },
    remeberPosition: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      show: false,
      btnPos: {
        startX: 0,
        startY: 0,
        endX: 0,
        endY: 0,
        x: 0,
        y: 0
      },
      isMovedd: false
    }
  },
  methods: {
    touchstart(e) {
      this.btnPos.startX = e.touches[0].pageX
      this.btnPos.startY = e.touches[0].pageY
    },
    touchend(e) {
      if (!this.isMoved) {
        return
      }
      this.isMoved = false

      this.btnPos.x = this.btnPos.endX
      this.btnPos.y = this.btnPos.endY
      this.btnPos.startX = 0
      this.btnPos.startY = 0
      this.btnPos.endX = 0
      this.btnPos.endY = 0

      if (this.remeberPosition) {
        Cookies.set(this.name + '_x', this.btnPos.x, { expires: 365 * 50 })
        Cookies.set(this.name + '_y', this.btnPos.y, { expires: 365 * 50 })
      }
    },
    touchmove(e) {
      if (e.touches.length > 0) {
        const $dragbtn = this.$refs[this.name]
        let offsetX = this.btnPos.startX - e.touches[0].pageX,
            offsetY = e.touches[0].pageY - this.btnPos.startY;

        let x = this.btnPos.x - offsetX,
            y = this.btnPos.y - offsetY;

         let pos = this.checkEdge(x, y)
          x = pos[0]
          y = pos[1]

        this.btnPos.endX = x;
        this.btnPos.endY = y;

        $dragbtn.style.left = x + 'px';
        $dragbtn.style.bottom = y + 'px';
        e.preventDefault();

        this.isMoved = true
      }
    },
    checkEdge(x, y) {
      const $dragbtn = this.$refs[this.name]

      // check edge
      if (x + $dragbtn.offsetWidth > document.documentElement.offsetWidth) {
        x = document.documentElement.offsetWidth - $dragbtn.offsetWidth;
      }
      if (y + $dragbtn.offsetHeight > document.documentElement.offsetHeight) {
        y = document.documentElement.offsetHeight - $dragbtn.offsetHeight;
      }
      if (x < 0) { x = 0 }
      if (y < 0) { y = 0 }
      return [x, y]
    },
    clickBtn() {
      this.$emit('click')
    }
  },
  mounted() {
    const $dragbtn = this.$refs[this.name]
    
    let x = defaultX,
        y = defaultY

    if (this.remeberPosition) {
      const _x = Cookies.get(this.name + '_x')
      if (_x) {
        x = _x * 1
      }

      const _y = Cookies.get(this.name + '_y')
      if (_y) {
        y = _y * 1
      }
    }

    // 检查坐标是否溢出屏幕
    if (x || y) {
      let pos = this.checkEdge(x, y)
      x = pos[0]
      y = pos[1]
    }

    this.btnPos.x = x
    this.btnPos.y = y
    $dragbtn.style.left = x + 'px'
    $dragbtn.style.bottom = `calc(env(safe-area-inset-bottom) + ${y}px)`
  }
}
</script>

<style lang="scss">

.drag-ball  {
  .drag-ball_btn {
    display: block;
    position: fixed;
    background-color: #fff;
    line-height: 1;
    padding: 0;
    z-index: 500;
    border-radius: 100%;
    border: 1px solid #fff;
    box-shadow: 0px 4px 10px 1px rgba(187, 187, 187, 0.753);
    width: 48px;
    height: 48px;
    text-align: center;
    
    bottom: calc(constant(safe-area-inset-bottom) + 62px);
    bottom: calc(env(safe-area-inset-bottom) + 62px);
  }
}
</style>
